<template>
	<view style="height: 400rpx" class="chart-box">
		<l-echart ref="chart"></l-echart>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {}
		},
		mounted() {
			this.$refs.chart.init(echarts, chart => {
				let option = {
					legend: {
						orient: 'vertical',
						right: 'right',
						top: 'center',
						icon: 'square'
					},
					series: [{
						name: '面积模式',
						type: 'pie',
						radius: [0, chart.getWidth() / 5],
						center: ['30%', '50%'],
						roseType: 'area',
						itemStyle: {
							borderRadius: 0
						},
						label: {
							show: true, // 显示标签
							formatter: '{d}%', // 显示百分比
							position: 'outside' // 标签显示在外部
						},
						labelLine: {
							show: true, // 显示线条
							length: 10, // 设置线条长度，调整此值来缩短或加长
							length2: 10 // 控制第二段的长度
						},
						data: [{
								value: 40,
								name: '研究生及以上'
							},
							{
								value: 38,
								name: '大学本科'
							},
							{
								value: 32,
								name: '大专高职'
							},
							{
								value: 30,
								name: '中专职高高中'
							},
							{
								value: 28,
								name: '初中及以下'
							}
						],
						color: ['#36F097', '#3DFFDC', '#1ED6FF', '#1ED6FF', '#5A3FFF']
					}]
				}
				chart.setOption(option);
			});
		}
	}
</script>